<template>
    <div>
        <div>
            <button @click="changeNumFn">切换1</button>
            <button @click="changeNumFn2">切换2</button>
        </div>
        <Bar :barCharOpt="barChartOpt"></Bar>
    </div>
</template>
<script>
    import Bar from './components/bar.vue'
    export default {
        components: {
            Bar,
        },
        data() {
            return {
                barChartOpt: {
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    },
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20],
                            // stack: '1',
                            z: '3', // 从3开始，就不会覆盖,值越大层级越高
                            barWidth: 10,
                        },
                        {
                            name: '销量2',
                            type: 'bar',
                            data: [53, 40, 96, 100, 70, 80],
                            // stack: '1',
                            barWidth: 10,
                        },
                        {
                            name: '利率',
                            type: 'line',
                            data: [20,10,40,30,60],
                        }
                    ]

                }
            }
        },
        methods: {
            changeNumFn() {
                console.log('切换');
                let barChartOpt =  {
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
                    },
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20],
                            // stack: '1',
                            z: '3', // 从3开始，就不会覆盖,值越大层级越高
                            barWidth: 10,
                        },
                        {
                            name: '销量2',
                            type: 'bar',
                            data: [53, 40, 96, 100, 70, 80],
                            // stack: '1',
                            barWidth: 10,
                        },
                        {
                            name: '利率',
                            type: 'line',
                            data: [20,10,40,30,60],
                        }
                    ]

                }
                setTimeout(() => {
                    this.barChartOpt = barChartOpt
                },200)
            },
            changeNumFn2() {
                console.log('切换2');
                let barChartOpt =  {
                    xAxis: {
                        data: ['1日'],
                    },
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5],
                            // stack: '1',
                            z: '3', // 从3开始，就不会覆盖,值越大层级越高
                            barWidth: 10,
                        },
                        {
                            name: '销量2',
                            type: 'bar',
                            data: [53],
                            // stack: '1',
                            barWidth: 10,
                        },
                        
                    ]

                }
                setTimeout(() => {
                    this.barChartOpt = barChartOpt
                },200)
            },

        }
    }
</script>